<template>
  <div class="content-container page-group-edit">
    <el-row style="padding-top:30px;">
      <el-col :span="1" style="line-height: 40px;font-size: 20px;padding-left:5px;">
        <router-link :to="'/group/portrait'" class="linkId">
          <i class="el-icon-arrow-left"></i>
        </router-link>
      </el-col>
      <el-col :span="4">
        <el-input v-model="name"></el-input>
      </el-col>
    </el-row>
    <div class="content-form">
      <el-collapse v-model="activeNames">
        <el-collapse-item name="1">
          <template slot="title">
            <span style="font-size:18px;margin-left:10px;"><i
              class="header-icon el-icon-caret-bottom"></i>选择画像人群的筛选条件</span>

          </template>
          <el-form ref="form" :model="form" :rules="rules" label-width="120px" style="padding:10px;">
            <div>
              <div class="contentLine" :style="{height:globalHeight}">
                <span @click="globalChangeExpressionFun">{{ globalStr }}</span>
              </div>
              <div class="itemContent" id="rowContentProperties">
                <div class="content-title"><i class="el-icon-plus"></i>用户属性满足
                  <el-link type="primary" :underline="false"
                           style="padding-left:20px;float:right;display: inline-block;"
                           @click="addUserAttribute">
                    <i class="el-icon-plus"></i> <span class="innerContent">筛选</span>
                  </el-link>
                </div>
                <div :style="{height:form.userAttributes.length*52+10+'px'}">
                  <div class="contentLine" :style="{height:height}" v-show="form.userAttributes.length>1">
                    <span @click="changeExpressionFun">{{ expressionStr }}</span>
                  </div>
                  <div class="contentProperties" id="divContentProperties">
                    <el-row v-show="form.userAttributes.length>0">
                      <el-form-item label="" style="display: block;padding-left:10px;" label-width="0px">
                        <p v-for="(v,index) in form.userAttributes">
                          <el-select v-model="form.userAttributes[index].attributeName" style="width:120px"
                                     @change="userAttributeChangeFun(form.userAttributes,index)">
                            <el-option
                              v-for="dict in userAttributeOptions"
                              :key="dict.attributeName"
                              :label="dict.attributeRemark"
                              :value="dict.attributeName"
                            />
                          </el-select>
                          <el-select v-model="form.userAttributes[index].valueExpression" style="width:120px"
                                     @change="eventPropertyChange(form.userAttributes[index],index)">
                            <el-option
                              v-for="dict in userPropertysOptions"
                              :key="dict.eventItemCode"
                              :label="dict.eventItemExpression"
                              :value="dict.eventItemCode"
                            />
                          </el-select>
                          <el-input v-model="form.userAttributes[index].value1Str" type="text" controls-position="right"
                                    style="width:100px"
                                    v-show="form.userAttributes[index].valueExpression!='between'"></el-input>
                          <span v-show="form.userAttributes[index].valueExpression=='between'">
                            <el-input v-model="form.userAttributes[index].value1Str" type="text"
                                      controls-position="right"
                                      style="width:90px"></el-input>与
                            <el-input v-model="form.userAttributes[index].value2Str" type="text"
                                      controls-position="right"
                                      style="width:90px"></el-input>之间
                        </span>
                          <el-link type="primary" :underline="false" style="padding-left:20px;font-size:18px"
                                   @click="removeRule(form.userAttributes,index)">
                            <i class="el-icon-remove"></i>
                          </el-link>
                        </p>

                      </el-form-item>
                    </el-row>
                  </div>
                </div>
              </div>
              <div class="itemContent">
                <div class="content-title"><i class="el-icon-plus"></i>用户行为满足
                  <el-link type="primary" :underline="false"
                           style="padding-left:20px;float:right;display: inline-block;"
                           @click="addUserActions">
                    <i class="el-icon-plus"></i> <span class="innerContent">筛选</span>
                  </el-link>
                </div>
                <div :style="{height:form.userActions.length*52+10+'px'}">
                  <div class="contentLine" :style="{height:actionHeight}" v-show="form.userActions.length>1">
                    <span @click="changeActionExpressionFun">{{ actionStr }}</span>
                  </div>
                  <div class="contentProperties" id="divContentActions">
                    <el-row v-show="form.userActions.length>0">
                      <el-form-item label="" style="display: block;padding-left:10px;" label-width="0px">
                        <p v-for="(v,index) in form.userActions">
                          <el-date-picker
                            v-model="form.userActions[index].dataRange"
                            size="small"
                            style="width: 240px"
                            value-format="yyyy-MM-dd"
                            type="daterange"
                            range-separator="-"
                            :picker-options="pickerOptions"
                            start-placeholder="开始日期"
                            end-placeholder="结束日期"
                          ></el-date-picker>
                          <el-select v-model="form.userActions[index].doThings" style="width:120px"
                                     @change="eventPropertyChange(form.userActions[index],index)">
                            <el-option label="做过" value="do"/>
                            <el-option label="未做过" value="undo"/>
                          </el-select>
                          <el-select v-model="form.userActions[index].eventType" style="width:120px"
                                     @change="eventTypeChange(funnelRuleType,index)">
                            <el-option
                              v-for="dict in eventTypeOptions"
                              :key="dict.eventType"
                              :label="dict.eventTypeName"
                              :value="dict.eventType"
                            />
                          </el-select>
                          <el-link type="primary" :underline="false" style="padding-left:20px;font-size:18px"
                                   @click="removeActionRule(form.userActions,index)">
                            <i class="el-icon-remove"></i>
                          </el-link>
                        </p>

                      </el-form-item>
                    </el-row>
                  </div>
                </div>
              </div>
              <div class="itemContent">
                <div class="content-title"><i class="el-icon-plus"></i>行为序列
                  <el-link type="primary" :underline="false"
                           style="padding-left:20px;float:right;display: inline-block;"
                           @click="addActionOrders">
                    <i class="el-icon-plus"></i> <span class="innerContent">筛选</span>
                  </el-link>
                </div>
                <div :style="{height:(childHeight+40)+'px'}">
                  <div class="contentLine" :style="{height:orderHeight}" v-show="form.userActionOrders.length>1">
                    <span @click="changeOrderExpressionFun">{{ orderStr }}</span>
                  </div>
                  <div class="contentProperties" id="divActionOrders">
                    <el-row v-show="form.userActionOrders.length>0">
                      <el-form-item label="" style="display: block;padding-left:10px;" label-width="0px">
                        <p v-for="(v,index) in form.userActionOrders">
                          <el-date-picker
                            v-model="form.userActionOrders[index].dataRange"
                            size="small"
                            style="width: 240px"
                            value-format="yyyy-MM-dd"
                            type="daterange"
                            range-separator="-"
                            :picker-options="pickerOptions"
                            start-placeholder="开始日期"
                            end-placeholder="结束日期"
                          ></el-date-picker>
                          依次做过
                          <el-link type="primary" :underline="false" style="padding-left:20px;font-size:18px"
                                   @click="removeActionOrderRule(form.userActionOrders,index)">
                            <i class="el-icon-remove"></i>
                          </el-link>
                          <el-row v-for="(item,itemIndex) in form.userActionOrders[index].eventItem">
                            <el-select v-model="item.eventType" style="width:120px"
                                       @change="eventTypeChange(funnelRuleType,index)">
                              <el-option
                                v-for="dict in eventTypeOptions"
                                :key="dict.eventType"
                                :label="dict.eventTypeName"
                                :value="dict.eventType"
                              />
                            </el-select>
                            <el-select v-model="item.eventItemCode" style="width:120px"
                                       @change="eventItemChange(funnelRuleType[index],index)">
                              <el-option
                                v-for="dict in eventItemsOptions"
                                :key="dict.eventItemCode"
                                :label="dict.eventItemName"
                                :value="dict.eventItemCode"
                              />
                            </el-select>
                            <el-select v-model="item.eventItemExpression" style="width:120px"
                                       @change="eventPropertyChange(funnelRuleType[index],index)">
                              <el-option
                                v-for="dict in eventPropertysOptions"
                                :key="dict.eventItemCode"
                                :label="dict.eventItemExpression"
                                :value="dict.eventItemCode"
                              />
                            </el-select>
                            <el-input v-model="item.value1Str" type="text" controls-position="right"
                                      style="width:100px"
                                      v-show="ruleTypes3Flag==1"></el-input>
                            <span v-show="ruleTypes3Flag==2">
                              <el-input v-model="item.value1Str" type="text" controls-position="right"
                                        style="width:90px"></el-input>与
                              <el-input v-model="item.value2Str" type="text" controls-position="right"
                                        style="width:90px"></el-input>之间
                          </span>

                            <el-link @click="removeOrderEventRule(form.userActionOrders[index].eventItem,itemIndex)"
                                     type="primary"
                                     style="padding-left:20px;font-size:18px" icon="el-icon-remove"></el-link>

                          </el-row>
                          <el-link type="primary" :underline="false" style="padding-left:20px;"
                                   @click="addActionOrderEventItem(form.userActionOrders[index].eventItem,index)">
                            <i class="el-icon-plus"></i>添加事件
                          </el-link>
                        </p>

                      </el-form-item>
                    </el-row>
                  </div>
                </div>
              </div>
              <el-divider></el-divider>
              <div style="margin-top:20px;padding-left:10px;">
                <el-button type="primary">查询</el-button>
              </div>
            </div>
          </el-form>
        </el-collapse-item>
      </el-collapse>

    </div>

  </div>

</template>

<script>

import {getUserAttributeList} from "@/api/config/userattribute";
import {listPropertyByType} from "@/api/config/property";
import {eventTypeOptions} from "@/api/config/item";

export default {
  name: "portraitEdit",
  components: {},
  data() {

    return {
      // 遮罩层
      loading: true,
      rules: [],
      name: '未命名用户群画像1',
      activeNames: '1',
      // 表单参数
      form: {
        userAttributes: [],
        userActions: [],
        userActionOrders: [],
        limitNumberFlag: false,
        limitType: '1'
      },
      active: 0,
      ruleTypes3Flag: 0,
      userPropertysOptions: [],
      userAttributeOptions: [],
      childHeight:0,
      globalHeight: '150px',
      height: '0px',
      actionHeight: '0px',
      orderHeight: '0px',
      globalStr: '且',
      expressionStr: '且',
      actionStr: '且',
      orderStr: '且',
      eventTypeOptions: []

    };
  },
  created() {
    this.getEventTypeList();
    this.getUserAttributeList();
  },
  methods: {

    getEventTypeList() {
      var param = {status: 'Y'};
      eventTypeOptions(param).then(response => {
        this.eventTypeOptions = response.data;
      });
    },
    getUserAttributeList() {
      var param = {status: 'Y'};
      getUserAttributeList(param).then(response => {
        this.userAttributeOptions = response.data;
      });
    },

    userAttributeChangeFun(array, index) {
      array[index].valueExpression = '';
      array[index].value1Str = '';
      array[index].value2Str = '';
      listPropertyByType({valueType: array[index].dataType}).then(response => {
        this.userPropertysOptions = response.data;
      });
    },

    eventPropertyChange(obj, index) {
      if (obj.eventItemExpression == 'between') {
        this.ruleTypes3Flag = 2;
      } else {
        this.ruleTypes3Flag = 1;
      }
    },

    addUserAttribute() {
      let userAttribute = {
        attributeName: '',
        attributeRemark: '',
        valueExpression: '',
        dataType: '',
        valueType: '',
        value1Str: '',
        value2Str: '',
      };

      this.form.userAttributes.push(userAttribute);
      let height = this.getDocumentHeight('divContentProperties');
      this.height = height;
      this.getGlobalHeight();
    },

    addUserActions() {
      let userAction = {
        dataRange: [],
        doThings: '',
        eventType: ''
      };
      this.form.userActions.push(userAction);
      let height = this.getDocumentHeight('divContentActions');
      this.actionHeight = height;
      this.getGlobalHeight();
    },
    getGlobalHeight(){
      let h1 = this.getDocumentHeight('divContentProperties');
      let h2 = this.getDocumentHeight('divContentActions');
      let h3 = this.getDocumentHeight('divActionOrders');
      let height1=h1.substring(0,h1.indexOf('px'));
      let height2=h2.substring(0,h2.indexOf('px'));
      let height3=h3.substring(0,h3.indexOf('px'));
      let glogH=200+parseFloat(height1)+parseFloat(height2)+parseFloat(height3);
      this.globalHeight=glogH+'px';
    }
    ,
    addActionOrders() {
      let actionOrder = {
        dataRange: [],
        eventItem: []
      };
      this.form.userActionOrders.push(actionOrder);
      let height = this.getDocumentHeight('divActionOrders');
      this.orderHeight = height;
      let ch=height.substring(0,height.indexOf('px'));
      this.childHeight=parseFloat(ch);
      this.getGlobalHeight();
    },

    getDocumentHeight(id) {
      let div = document.getElementById(id);
      let height = window.getComputedStyle(div).getPropertyValue('height');
      return height;
    },

    removeRule(array, index) {
      array.splice(index, 1);
      let hstr = this.height.substring(0, this.height.length - 2);
      let newh = parseInt(hstr) - 50;
      this.height = newh + 'px';
    },
    removeActionRule(array, index) {
      array.splice(index, 1);
      let hstr = this.actionHeight.substring(0, this.actionHeight.length - 2);
      let newh = parseInt(hstr) - 50;
      this.actionHeight = newh + 'px';
    },
    removeActionOrderRule(array, index) {
      array.splice(index, 1);
      let hstr = this.orderHeight.substring(0, this.orderHeight.length - 2);
      let newh = parseInt(hstr) - 50;
      this.orderHeight = newh + 'px';
    },

    setDivHeight() {
      let height = this.getDocumentHeight('divContentProperties');

    },

    handleClose() {
      this.drawer = false;
    },

    buildUserGroup() {
      this.open = false;
      this.drawer = true;
    },

    prevSteps() {
      this.active = 0;
    },
    changeSteps() {
      if (this.active++ > 1) this.active = 0;
    },
    globalChangeExpressionFun() {
      this.globalStr = this.globalStr === '且' ? '或' : '且';
    },
    changeExpressionFun() {
      this.expressionStr = this.expressionStr === '且' ? '或' : '且';
    },

    changeActionExpressionFun() {
      this.actionStr = this.actionStr === '且' ? '或' : '且';
    },
    changeOrderExpressionFun() {
      this.orderStr = this.orderStr === '且' ? '或' : '且';
    },

    addActionOrderEventItem(itemArray) {
      let eventItem = {
        eventType: '',
        eventItemCode: '',
        eventItemExpression: '',
        valueType: '',
        value1Str: '',
        value2Str: '',
      };
      itemArray.push(eventItem);
      let height = this.getDocumentHeight('divActionOrders');
      this.orderHeight = height;
      let ch=height.substring(0,height.indexOf('px'));
      this.childHeight=parseFloat(ch);
      this.getGlobalHeight();
    },

    removeOrderEventRule(itemArray, index) {
      itemArray.splice(index, 1);
    }
  }
};
</script>
<style rel="stylesheet/scss" lang="scss">
.content-container {
  width: 100%;
  padding: 0 20px;
  background: #f7f9fa;
  display: flex;
  flex-direction: column;
}

.content-title {
  font-size: 15px;
  font-weight: bold;
}

.content-form {
  width: 100%;
  background-color: #fff;
  border-radius: 3px;
  margin-top: 30px;
  padding-top: 20px;
}

.ant-modal-body {
  padding: 24px;
  font-size: 14px;
  line-height: 1.5;
  word-wrap: break-word;

  .index__container___2sti8 {
    background: #fff;
    width: 540px;
    padding: 15px 20px;
    border-radius: 3px;
    border: 1px solid #e9f0f7;
    margin-bottom: 16px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    cursor: pointer;

    .index__blockLogo___hnHAh {
      width: 73px;
      text-align: center;
    }

    .index__blockDivideLine___2nKYu:before {
      content: "";
      border-left: 1px solid #e0e6ed;
      height: 40px;
      display: block;
      margin: 0 27px;
    }

    .index__blockDesc___EXACq {
      display: inline-block;
      width: 383px;
    }
  }

  .index__container___2sti8:hover {
    border-color: #00bf8a;
  }
}

.page-group-edit{
	.itemContent {
	  border: 1px solid #e0e6ed;
	  padding: 10px 10px;
	  height: auto;
	  margin-left:30px;
	  border-radius: 3px;
	  margin-bottom: 15px;
	}
	
	.contentLine {
	  width: 2px;
	  float: left;
	  margin-top: 2%;
	  margin-left:10px;
	  background-color: #d6efe8;
	}
	
	.contentLine > span {
	  position: relative;
	  display: block;
	  top: 50%;
	  left: -12px;
	  right: 0;
	  width: auto;
	  min-width: 25px;
	  height: 25px;
	  transform: translateY(-50%);
	  border-radius: 3px;
	  background: #d6efe8;
	  color: #00d166;
	  font-size: 14px;
	  font-weight: 700;
	  line-height: 25px;
	  text-align: center;
	  cursor: pointer;
	  user-select: none;
	}
	
	.contentProperties {
	  width: 99%;
	  float: right;
	
	  .el-form-item {
	    margin-bottom: 0px;
	  }
	}
}


.el-drawer {
  overflow: scroll
}
</style>
